<template name="livechatAnalytics">
	{{#requiresPermission 'view-livechat-analytics'}}
	<form class="form-inline">
		<div class="form-group rc-select">
			<select id="lc-analytics-options" class="required input-monitor rc-select__element">
				{{#each analyticsAllOptions}}
				<option class="rc-select__option" value="{{value}}" selected="{{selected value}}" dir="auto">{{_ name}}</option>
				{{/each}}
			</select>
			<i class="icon-angle-down"></i>
		</div>

		<div class="form-group lc-analytics-header">
			{{#if showLeftNavButton}}
			<button class="lc-daterange-prev">
				<i class="icon-left-circled"></i>
			</button>
			{{/if}}
			<button class="rc-tooltip rc-tooltip--down js-button lc-date-picker-btn">
				{{#with daterange}}
				<span class="lc-datarange-from">{{from}}</span>
				<span class="fade">{{_ "to" }}</span>
				<span class="lc-datarange-to">{{to}}</span>
				{{/with}}
			</button>
			{{#if showRightNavButton}}
			<button class="lc-daterange-next">
				<i class="icon-right-circled"></i>
			</button>
			{{/if}}
		</div>
	</form>
	<div class="section">
		<div class="section-content border-component-color">
			<div class="lc-analytics-overview">
				{{#each analyticsOverviewData}}
				<div class="lc-analytics-ov-col">
					{{#each this}}
					<div class="lc-analytics-ov-case">
						<span class="value">{{value}}</span>
						<span class="title">{{_ title}}</span>
					</div>
					{{/each}}
				</div>
				{{/each}}
			</div>
		</div>
	</div>
	<div class="lc-analytics-table">
		<div class="lc-analytics-flex-container">
			<div class="lc-analytics-chart-col">
				<div class="section lc-chart-section">
					<div class="section-content border-component-color lc-chart-section-content">
						<div class="rc-select lc-chart-options">
							<select id="lc-analytics-chart-options" class="required input-monitor rc-select__element">
								{{#with analyticsOptions}} {{#each chartOptions}}
								<option class="rc-select__option" value="{{value}}" selected="{{selected value}}" dir="auto">{{_ name}}</option>
								{{/each}} {{/with}}
							</select>
							<i class="icon-angle-down"></i>
						</div>
						<div class="lc-analytics-chart-container">
							<canvas id="lc-analytics-chart"></canvas>
						</div>
					</div>
				</div>
			</div>
			<div class="lc-analytics-chart-ov-col">
				<div class="section lc-chart-section">
					<div class="section-content border-component-color lc-chart-section-content">
						<div class="lc-chart-ov-content">
							<div class="list">
								<table class="secondary-background-color">
									{{#with agentOverviewData}}
									<thead>
										<tr class="table-row">
											{{#each head}}
											<th class="content-background-color border-component-color">{{_ name}}</th>
											{{/each}}
										</tr>
									</thead>
									<tbody>
										{{#each data}}
										<tr>
											<td class="border-component-color border-component-td">{{name}}</td>
											<td class="border-component-color">{{value}}</td>
										</tr>
										{{/each}}
									</tbody>
									{{/with}}
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	{{/requiresPermission}}
</template>
